<template>
    <div class="dengesCourse">
        <div class="dengesBanner">
            <!-- <div class="dengesCard" v-if="courseStatus === 0 || courseStatus === 1 || courseStatus === 2">
                <img :src="courseBanner" lazy-load>
                <div class="dengesInfo">
                    <div class="courseProgress">
                        <div class="progressLine" :style="'width:'+ ((courseSchedule-0)*100)+'%' "></div>
                    </div>
                    <div class="courseTitle">
                        课程已完成{{courseFinsih}}/{{courseDay}}
                    </div>
                </div>
            </div> -->

            <div class="dengesFence">
                <div class="mineCourse">我的课程</div>
                <div class="courseCenter" @click.stop.prevent="goToCourseReferral">课程中心</div>
            </div>
            <div class="dengesFence">
                <div class="courseTitle">{{courseCaption}}</div>
                <div class="courseMessage">      
                    <div class="courseStatus" v-if="courseStatus === 0">未开始</div>
                    <div class="courseStatus" v-if="courseStatus === 1">正在进行</div>
                    <div class="courseStatus" v-if="courseStatus === 2">已结束</div>
                    <div class="coursePeriod">{{courseDay}}课时</div>
                </div>
            </div>

        </div>
        <div class="dengesMatter">
            <div class="dengesFiche" v-if="courseStatus === 0">
                <!-- 还没开始 -->
                <div class="courseDNS">
                    <div class="countZeroTitle">开课倒计时</div>
                    <div class="countZeroDay">
                        <div>{{courseCountZero}}</div>
                        <div>天</div>
                    </div>
                    <div class="courseStartDay">开课时间{{courseStart}}</div>
                    <!-- <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fdefault_01%402x.png" lazy-load> -->
                    <div class="countZeroButton">
                        <div  @click.stop.prevent="goToTutionProcess">开课流程</div>
                        <div  @click.stop.prevent="goToPersonalTeacher">我的老师</div>
                    </div>
                    <!-- <div class="countZeroButton" @click.stop.prevent="goToPersonalTeacher">我的老师</div> -->
                </div>
            </div>
            <form @submit.stop.prevent="formSubmit($event)" report-submit>
                <button formType="submit" class="form-btn">
                    <div class="dengesFiche" v-if="courseStatus === 1">
                        <!-- <div class="courseAdsum" v-if="courseData.denges_Falg === '1'" @click.stop.prevent="goToCourseDetails(courseData)"> -->
                        <div class="courseAdsum" v-if="courseData.denges_Falg === '1'" @click.stop.prevent="goToCourseDetails(courseData)">
                            <!-- <div class="courseLeft">
                                <div>Day</div>
                                <div>{{courseData.beforeLen+1}}</div>
                            </div>
                            <div class="courseRight">
                                <div>悦器社{{courseDay}}天吉他训练营</div>
                                <div>第{{courseData.beforeLen+1}}课{{courseData.section_name}}</div>
                                <div>
                                    <p>点击进入今日课程的学习</p>
                                    <p><img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fmore.png" lazy-load></p>
                                </div>
                            </div> -->
                            <!-- <div class="sectionMessage">
                                <div>Day 01</div>
                                <div>熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指熟悉指</div>
                                <div>
                                    <div class="star"></div>
                                    <div class="score"></div>
                                </div>
                            </div>
                            <div class="sectionImage">
                                <img src="https://oimagec7.ydstatic.com/image?id=-1925268780747139314&product=adpublish&w=1280&h=720&sc=0&rm=2&gsb=0&gsbd=60" lazy-load>
                            </div> -->
                            <planCard :plan="courseData" :starShow="versions === 1"  v-if="courseData"></planCard>
                        </div>
                        <div v-else>
                            <div class="courseNone">
                                <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fdefault%402x.png" lazy-load>
                            </div>
                        </div>
                    </div>
                    <div class="dengesFiche" v-if="courseStatus === 2">
                        <div class="courseOver">
                            <div class="overLeft"></div>
                            <div class="overRight">
                                <div>悦器社{{courseDay}}天吉他训练营</div>
                                <div>课程已结束</div>
                                <div>恭喜你打开了音乐世界的大门</div>
                            </div>
                        </div>
                    </div>
                </button>
            </form>
        </div>
        <div class="volitionplan" v-if="volitionBanner && startTimeCuo > 1541433600000">
            <form @submit.stop.prevent="goToVolitionPlan($event)" report-submit>
                <button formType="submit" class="form-btn">
                    <div class="volitionGuide">
                        <img :src="volitionBanner" lazy-load mode="widthFix">
                    </div>
                </button>
            </form>    
        </div>

        <!-- <div @click="downloadAccredit">download</div> -->
    </div>
</template>

<script>
import {obtainDengesCourse, saveStudentFormId, amendUserinfo} from '@/config/api'
import {NEWMODULEBATCHID} from '@/config/env'
import {dateRegExp} from '@/config/mUtils'
import planCard from '@/components/planCard'
export default {
  components:{
    planCard
  },
  data () {
    return {
      // 用户信息
      userInfo: [],
      // 课程数据
      courseData: {},
      // 课程状态 （0 还没开始/ 1 进行中/ 2 已经结束）
      courseStatus: null,
      // 课程天数
      courseDay: 0,
      // 课程banner
      courseBanner: '',
      // 课程标题
      courseCaption: '',  
      // 课程进度
      courseSchedule: null,
      // 课程完成天数
      courseFinsih: null,
      // 开课时间
      courseStart: null,
      // 开课时间 时间磋
       startTimeCuo: null,
      // 课程倒计时天数
      courseCountZero: null,    
      // 批次id
      batchId: '',
      // 学员id
      studentId: '',
      // 意志计划 banner
      volitionBanner: '',
      // 新旧版本  0 旧  1 新
      versions: 0   


    //   downloadCount: 0
    }
  },
  mounted () {
    // let self = this
    // // 本地用户信息
    // self.userInfo = wx.getStorageSync('userInfo')
    // console.log(self.userInfo, '.....self.userInfo')
    // if (JSON.stringify(self.userInfo) != '[]') {
    //   // 获取 今日课程 数据
    //   self.acquireDengesCourseData()
    // }
    let self = this;
    // 初始化 今日课程界面
    self.initDengesCourse();
  },
  methods: {
    // 初始化 今日课程界面
    async initDengesCourse(){
        let self = this
        // 本地用户信息
        self.userInfo = await wx.getStorageSync('userInfo')
        console.log(self.userInfo, '.....今日课程........userInfo')
        if (JSON.stringify(self.userInfo) != '[]') {   
            if (wx.getStorageSync('batch_id') && wx.getStorageSync('student_id')) {
                // 批次id
                self.batchId = await wx.getStorageSync('batch_id')
                // 学员id
                self.studentId = await wx.getStorageSync('student_id')
                if (self.batchId <= NEWMODULEBATCHID) {
                    // 新旧版本  0 旧  1 新
                    self.versions = 0  
                } else {
                    // 新旧版本  0 旧  1 新
                    self.versions = 1
                }

                // 获取 今日课程 数据
                await self.acquireDengesCourseData()
            } else {
                // // 消息推送 进入
                // if (self.$root.$mp.query.batch_id && self.$root.$mp.query.student_id) {
                //     // 批次id
                //     self.batchId = self.$root.$mp.query.batch_id
                //     // 学员id
                //     self.studentId = self.$root.$mp.query.student_id
                //     // 引导状态
                //     const guideState = wx.getStorageSync('guide_state')? wx.getStorageSync('guide_state'): 0
                //     // 修改 用户信息
                //     const personalState = await amendUserinfo(self.userData.openId, self.batchId, self.studentId, guideState)
                //     console.log(personalState, '...personalState')
                //     if (personalState.status === 200) {
                //         wx.setStorageSync('student_id', self.studentId)
                //         wx.setStorageSync('batch_id', self.batchId)
                //         wx.setStorageSync('super_user', personalState.data.super_user)  
                //         wx.setStorageSync('plan_state', 1)  
                //         // 获取 今日课程 数据
                //         await self.acquireDengesCourseData()
                //     }                
                // }
            }
            console.log(self.userInfo, self.batchId, '.....self.userInfo')
        }
    },
    // 获取 今日课程 数据
    async acquireDengesCourseData () {
      let self = this
      console.log('获取 今日课程 数据......', self.userInfo.openId, self.batchId, self.studentId)
      wx.showNavigationBarLoading()
      let courseInfo = await obtainDengesCourse(self.userInfo.openId, self.batchId, self.studentId, self.userInfo.unionId)
      if (courseInfo) {
        // 课程数据
        self.courseData = courseInfo.data.list
        // 课程状态 （0 还没开始/ 1 进行中/ 2 已经结束）
        self.courseStatus = courseInfo.data.status
        // 课程天数
        self.courseDay = courseInfo.data.day
        // 课程banner
        self.courseBanner = courseInfo.data.banner
        // 课程标题
        self.courseCaption = courseInfo.data.title
        // 课程进度
        self.courseSchedule = courseInfo.data.schedule
        // 课程完成天数
        self.courseFinsih = courseInfo.data.finishDay
        // 课程倒计时天数
        self.courseCountZero = courseInfo.data.countdownDay
        // 开课时间
        self.courseStart = dateRegExp ((courseInfo.data.stratTime - 0), 'MM月dd日')
        
        // 开课时间 时间磋
        self.startTimeCuo = courseInfo.data.stratTime

        // 意志计划 banner
        self.volitionBanner = courseInfo.data.willBanner

        // console.log(JSON.stringify(self.courseData), '.....JSON.stringify(courseData)')
      }
      console.log(courseInfo, '....今日课程')
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    },
    // 跳转到 课程详情页
    goToCourseDetails(item){
        let self = this;
        if(item){
            // console.log(self.batchId === '20190109026', '....this.batchId')
            if (self.batchId <= NEWMODULEBATCHID) {
                wx.navigateTo({
                    url: '../courseParticulars/main?section_id='+item.section_id+'&batch_id='+self.batchId
                })
            } else {
                wx.navigateTo({
                    url: '../courseCircumstance/main?section_id='+item.section_id+'&batch_id='+self.batchId
                })
            }
        }
    },
    // 跳转到 课程介绍页
    goToCourseReferral () {
        wx.navigateTo({
            url: '../courseReferral/main'
        })
    },
    // 跳转到 开课流程
    goToTutionProcess () {
        wx.navigateTo({
            url: '../tutionProcess/main'
        })
        // wx.scanCode({
        //     onlyFromCamera: true,
        //     success: (res) => {
        //         console.log("扫码结果");
        //         console.log(res);
        //     },
        //     fail: (res) => {
        //         console.log(res);
        //     }
        // })
    },
    // 跳转到 我的老师页
    goToPersonalTeacher () {
        wx.navigateTo({
            url: '../personalTeacher/main'
        })
    },
    // 跳转到 意志计划页
    async goToVolitionPlan (e) {
        let self = this;
        console.log('跳转到 意志计划页')
        wx.navigateTo({
            url: '../volitionPlan/main?stratTime='+ self.startTimeCuo   
        })
        // 保存用户点击的formid
        await saveStudentFormId(self.userInfo.openId, e.target.formId, self.userInfo.unionId) 
    },
    // 保存用户 消息提示id
    async formSubmit (e) {
        let self = this; 
        console.log(e, self.courseData, '................')
        // 课程状态 （0 还没开始/ 1 进行中/ 2 已经结束）
        // if (self.courseStatus === 0){
        //     // 跳转到 我的老师页
        //     self.goToPersonalTeacher()
        // }
        if (self.courseStatus === 1){
            // 跳转到 课程详情页
            self.goToCourseDetails(self.courseData)
        }
        // 保存用户点击的formid
        await saveStudentFormId(self.userInfo.openId, e.target.formId, self.userInfo.unionId)
    },
  },
  // 下拉刷新
  onPullDownRefresh () {
    let self = this;
    // 初始化 今日课程界面
    self.initDengesCourse();
    // // 本地用户信息
    // self.userInfo = wx.getStorageSync('userInfo')
    // if (JSON.stringify(self.userInfo) != '[]') {
    //   // 获取 今日课程 数据
    //   self.acquireDengesCourseData()
    // }
  },
  // 页面显示
  onShow () {
    let self = this;
    console.log('页面显示')

    // let app = getApp(); 
    // if (app.batch_id && app.section_id && app.wechatGoto) {
    //     // 跳转详情
    //     wx.navigateTo({
    //         url: '../courseParticulars/main?section_id='+app.section_id+'&batch_id='+app.batch_id
    //     })
    //     app.wechatGoto = false;
    //     app.section_id = '';
    //     app.batch_id = '';
    // } else {
        // 初始化 今日课程界面
        self.initDengesCourse();
    // }
  }
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
    background: #fafafa;
}
</style>


<style lang="less" scoped>
.dengesCourse{
    width: 100%;
    .dengesBanner{
        width: 686rpx;
        margin: 20rpx auto 30rpx;
        // height: 350rpx;
        // position: relative;
        background: #FFFFFF;
        border-radius: 10rpx;
        padding: 0 36rpx;
        box-sizing: border-box;
        // .dengesCard{
        //     width: 100%;
        //     height: 100%;
        //     img {
        //         width: 100%;
        //         height: 100%;
        //     }
        //     .dengesInfo{
        //         position: absolute;
        //         bottom:0;
        //         width: 100%;
        //         text-align: center;
        //         padding-top: 10rpx;
        //         .courseProgress{
        //             position: relative;
        //             left: 50%;
        //             margin-left: -215rpx;
        //             height: 18rpx;
        //             width: 430rpx;
        //             border: 1rpx solid #FFFFFF;
        //             background: #FFFFFF;
        //             opacity: .8;
        //             border-radius: 12rpx;
        //             text-align: center;
        //             line-height: 18rpx;
        //             overflow: hidden;
        //             .progressLine{
        //                 position: absolute;
        //                 height: 100%;
        //                 width: 0;
        //                 background-size: 15rpx 15rpx;
        //                 background-image: linear-gradient(-45deg, #FE7A72, #FE7A72 1%, #FFFFFF 10%, #FFFFFF 50%, #FE7A72 50%, #FE7A72 60%, #FFFFFF 60%, #FFFFFF);
        //             }
        //             @keyframes animate {
        //                 from {
        //                     background-position: 0 0;
        //                 }
        //                 to {
        //                     background-position: 60rpx 30rpx;
        //                 }
        //             }
        //         }
        //         .courseTitle{
        //             font-family: PingFangSC-Regular;
        //             font-size: 20rpx;
        //             color: #FE7A72;
        //             height: 28rpx;
        //             line-height: 28rpx;
        //             margin-top: 6rpx;
        //             padding-bottom: 10rpx;
        //         }
        //     }
        // }
        .dengesFence{
            line-height: 1;
            position: relative;
            border-bottom: 1rpx solid #EAEAEA;
            &:nth-child(1) {
                .mineCourse{
                    font-family: PingFangSC-Medium;
                    font-size: 36rpx;
                    color: #333333;
                    letter-spacing: 0.73rpx;
                    height: 99rpx;
                    line-height: 99rpx;
                }
                .courseCenter{
                    position: absolute;
                    top: 26rpx;
                    right: 0;
                    background-image: linear-gradient(90deg, #FFB497 0%, #FE7A72 100%);
                    border-radius: 24rpx;
                    width: 180rpx;
                    height: 48rpx;
                    line-height: 48rpx;
                    text-align: center;
                    font-family: PingFangSC-Regular;
                    font-size: 30rpx;
                    color: #FFFFFF;
                    letter-spacing: 0.61rpx;
                }
            }
            &:last-child{
                border-bottom: none;
            }

            .courseTitle{
                font-family: PingFangSC-Regular;
                font-size: 32rpx;
                color: #333333;
                letter-spacing: 0.65rpx;
                height: 95rpx;
                line-height: 95rpx;
                width: 400rpx;
                white-space: nowrap;
                overflow: hidden;
                /* 文本超出变省略号 */
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }
            .courseMessage{
                position: absolute;
                top: 13rpx;
                right: 0;
                text-align: right;
                .courseStatus{
                    font-family: PingFangSC-Regular;
                    font-size: 24rpx;
                    color: #159E5D;
                    letter-spacing: 0;
                    height: 33rpx;
                    line-height: 33rpx;
                    margin-bottom: 2rpx;
                }
                .coursePeriod{
                    font-family: PingFangSC-Regular;
                    font-size: 24rpx;
                    color: #666666;
                    letter-spacing: 0;
                    height: 33rpx;
                    line-height: 33rpx;
                }
            }
        }

        
    }
    .dengesMatter{
        width: 686rpx;
        // height: 264rpx;
        margin: 0 auto;
        background: #FFFFFF;
        box-shadow: 0 0 10rpx 2rpx rgba(198,198,198,0.30);
        border-radius: 10rpx;
        form {
            margin: 0 auto;
            .form-btn {
                border:none;
                text-align:left;
                padding:0;
                margin:0;
                background-color: transparent;
                &::after {
                    border: none;
                }
            }
        }
        .dengesFiche{
            width: 100%;
            // height: 100%;
            .courseDNS{
                // width: 475rpx;
                // height: 430rpx;
                width: 100%;
                height: 320rpx;
                margin: 0 auto;
                // margin-top: 12rpx;
                // text-align: center;
                img {
                    width: 100%;
                    height: 100%;
                }
                .countZeroTitle{
                    line-height: 1;
                    font-family: PingFangSC-Regular;
                    font-size: 32rpx;
                    color: #666666;
                    letter-spacing: 0.65rpx;
                    padding-top: 22rpx;
                    text-align: center;
                }
                .countZeroDay{
                    line-height: 1;
                    height: 140rpx;
                    line-height: 140rpx;
                    div {
                        line-height: 1;
                        display: inline-block;
                        &:nth-child(1){
                            margin-left: 312rpx;
                            margin-right: 8rpx;
                            font-family: PingFangSC-Medium;
                            font-size: 100rpx;
                            color: #333333;
                            letter-spacing: 2.02rpx;
                            vertical-align: middle;
                        }
                        &:nth-child(2){
                            font-family: PingFangSC-Regular;
                            font-size: 20rpx;
                            color: #666666;
                            letter-spacing: 1.55rpx;
                            vertical-align: bottom;
                            padding-bottom: 21rpx;
                        } 
                    }
                }
                .courseStartDay{
                    line-height: 1;
                    font-family: PingFangSC-Regular;
                    font-size: 22rpx;
                    color: #666666;
                    letter-spacing: 1.71rpx;
                    text-align: center;
                    margin-bottom: 23rpx;
                }
                .countZeroButton{
                    // display: inline-block;
                    // vertical-align: middle;
                    line-height: 1;
                    div {
                        display: inline-block;
                        vertical-align: middle;
                        width: 160rpx;
                        height: 50rpx;
                        line-height: 50rpx;
                        text-align: center;
                        background-image: linear-gradient(90deg, #FFB497 0%, #FE7A72 100%);
                        border-radius: 8rpx;
                        font-family: PingFangSC-Regular;
                        font-size: 26rpx;
                        color: #FFFFFF;
                        letter-spacing: 0.98rpx;
                        &:nth-child(1){
                            margin-left: 134rpx;
                            margin-right: 98rpx;
                        }
                    }
                }
            }
            .courseAdsum{
                // height: 264rpx;
                // .courseLeft{
                //     display: inline-block;
                //     vertical-align: top;
                //     margin-right: 65rpx;
                //     margin-left: 46rpx;
                //     margin-top: 39rpx;
                //     font-size: 0;
                //     line-height: 1;

                //     width: 177rpx;
                //     height: 186rpx;
                //     position: relative;
                //     background-image : url('http://mobuz-mp.cdn.bcebos.com/matter%2Fcalendar%402x.png');
                //     background-repeat: no-repeat;
                //     background-position: center center;
                //     background-size: cover;
                //     text-align: center;

                //     div{
                //         position: absolute;
                //         font-size: 0;
                //         line-height: 1;
                //         width: 177rpx;
                //         &:nth-child(1){
                //             font-family: ChalkboardSE-Regular;
                //             font-size: 46rpx;
                //             color: #333333;
                //             bottom: 67rpx;
                //         }
                //         &:nth-child(2){
                //             font-family: ChalkboardSE-Regular;
                //             font-size: 46rpx;
                //             color: #333333;
                //             bottom: 12rpx; 
                //         }
                //     }
                // }
                // .courseRight{
                //     display: inline-block;
                //     vertical-align: top;
                //     margin-top: 60rpx;
                //     width: 334rpx;
                //     text-align: center;
                //     font-size: 0;
                //     line-height: 1;
                //     div{
                //         font-size: 0;
                //         line-height: 1;
                //         font-family: PingFangSC-Regular;
                //         color: #666666;
                //         &:nth-child(1){
                //             font-size: 32rpx;
                //             width: 334rpx;
                //             height: 45rpx;
                //             line-height: 45rpx;
                //             margin: 0 auto;
                //             white-space: nowrap;
                //             overflow: hidden;
                //             text-overflow: ellipsis;
                //             -o-text-overflow: ellipsis;
                //             margin-bottom: 14rpx;        
                //         }
                //         &:nth-child(2){
                //             font-family: PingFangSC-Light;
                //             font-size: 26rpx;
                //             width: 273rpx;
                //             height: 37rpx;
                //             line-height: 37rpx;
                //             margin: 0 auto;
                //             white-space: nowrap;
                //             overflow: hidden;
                //             text-overflow: ellipsis;
                //             -o-text-overflow: ellipsis;
                //             margin-bottom: 26rpx;        
                //         }
                //         &:nth-child(3){
                //             font-family: PingFangSC-Light;
                //             font-size: 20rpx;
                //             p{
                //                 display: inline-block;
                //                 vertical-align: middle;
                //                 line-height: 1;
                //                 &:nth-child(2){
                //                     width: 8rpx;
                //                     height: 18rpx;
                //                     margin-left: 17rpx; 
                //                     img{
                //                     width: 100%;
                //                     height: 100%; 
                //                     }
                //                 }
                //             } 
                //         }
                //     }   
                // }
                // height: 270rpx;
                // position: relative;
                // padding: 35rpx 30rpx 35rpx 34rpx;
                // box-sizing: border-box;
                // .sectionMessage{
                //     line-height: 1;
                //     padding-right: 363rpx;
                //     div{
                //         line-height: 1;
                //         &:nth-child(1){
                //             font-family: PingFangSC-Medium;
                //             font-size: 36rpx;
                //             color: #333333;
                //             letter-spacing: 0.73rpx;
                //             height: 50rpx;
                //             line-height: 50rpx;
                //             margin-bottom: 8rpx;
                //         }
                //         &:nth-child(2){
                //             font-family: PingFangSC-Regular;
                //             font-size: 32rpx;
                //             color: #666666;
                //             letter-spacing: 0.65rpx;
                //             display: -webkit-box;
                //             -webkit-box-orient: vertical;
                //             -webkit-line-clamp: 2;
                //             overflow: hidden;

                //             // position: relative;
                //             // line-height: 45rpx;
                //             // height: 90rpx;
                //             // overflow:hidden;
                //             // &::after {
                //             //     content: '...';
                //             //     font-weight: bold;
                //             //     position: absolute;
                //             //     bottom: 0;
                //             //     right: 0;
                //             //     padding:0 80rpx 1rpx 90rpx;
                //             //     background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
                //             // }

                //         }
                //         &:nth-child(3){
                //             font-size: 0;
                //             line-height: 1;
                //             position: absolute;
                //             bottom: 35rpx;
                //             .star {
                //                 display: inline-block;
                //                 vertical-align: middle;
                //                 height: 30rpx;
                //                 line-height: 30rpx;
                //             }
                //             .score {
                //                 display: inline-block;
                //                 vertical-align: middle;
                //                 height: 30rpx;
                //                 line-height: 30rpx;
                //                 padding-left: 17rpx;
                //                 border-left: 1rpx solid #333;

                //             }
                            
                //         }    
                //     }
                // }
                // .sectionImage{
                //     position: absolute;
                //     top: 35rpx;
                //     right: 30rpx;
                //     width: 280rpx;
                //     height: 200rpx;
                //     border-radius: 10rpx;
                //     overflow: hidden;
                //     img{
                //         width: 100%;
                //         height: 100%; 
                //     }
                // }

            }

            .courseNone {
                width: 475rpx;
                height: 430rpx;
                margin: 0 auto;
                margin-top: 12rpx;
                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .courseOver{
                height: 264rpx;
                .overLeft{
                    display: inline-block;
                    vertical-align: top;
                    margin-right: 65rpx;
                    margin-left: 60rpx;
                    margin-top: 44rpx;
                    font-size: 0;
                    line-height: 1;

                    width: 163rpx;
                    height: 183rpx;
                    background-image : url('http://mobuz-mp.cdn.bcebos.com/matter%2Fcomplete%402x.png');
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: cover;
                    text-align: center;
                }
                .overRight{
                    display: inline-block;
                    vertical-align: top;
                    margin-top: 60rpx;
                    width: 365rpx;
                    text-align: center;
                    font-size: 0;
                    line-height: 1;
                    div{
                        font-size: 0;
                        line-height: 1;
                        color: #666666;
                        &:nth-child(1){
                            font-size: 32rpx;
                            font-family: PingFangSC-Regular;
                            letter-spacing: 0.65rpx;
                            height: 45rpx;
                            line-height: 45rpx;
                            margin: 0 auto;
                            white-space: nowrap;
                            overflow: hidden;
                            /* 文本超出变省略号 */
                            text-overflow: ellipsis;
                            -o-text-overflow: ellipsis;
                            margin-bottom: 23rpx;        
                        }
                        &:nth-child(2){
                            font-family: PingFangSC-Light;
                            font-size: 26rpx;
                            letter-spacing: 0.68rpx;
                            line-height: 47rpx;
                            margin: 0 auto;
                            white-space: nowrap;
                            overflow: hidden;
                            /* 文本超出变省略号 */
                            text-overflow: ellipsis;
                            -o-text-overflow: ellipsis;      
                        }
                        &:nth-child(3){
                            font-family: PingFangSC-Light;
                            font-size: 26rpx;
                            letter-spacing: 0.68rpx;
                            line-height: 47rpx;
                            margin: 0 auto;
                            white-space: nowrap;
                            overflow: hidden;
                            /* 文本超出变省略号 */
                            text-overflow: ellipsis;
                            -o-text-overflow: ellipsis;         
                        }
                    }   
                }
            }
        }
    }
    .volitionplan{
        width: 686rpx;
        // height: 264rpx;
        margin: 0 auto;
        background: #FFFFFF;
        box-shadow: 0 0 10rpx 2rpx rgba(198,198,198,0.30);
        border-radius: 10rpx;
        margin-top: 30rpx;
        form {
            margin: 0 auto;
            .form-btn {
                border:none;
                text-align:left;
                padding:0;
                margin:0;
                background-color: transparent;
                &::after {
                    border: none;
                }
            }
        }
        .volitionGuide{
            // width: 475rpx;
            height: 300rpx;
            // margin: 0 auto;
            // margin-top: 12rpx;
            img{
                width: 100%;
                // height: 100%;
            }
        }
    }  
}
</style>
